<template>
  <div class="login">
    <h3>用户注册</h3>
    <div class="user-form">
      <el-form ref="form" label-width="80px">
        <el-form-item label="用户ID号">
          <el-input v-model="user.id"></el-input>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="user.userName"></el-input>
        </el-form-item>
        <el-form-item label="注册角色">
          <el-select placeholder="请选择注册角色" v-model="user.userType">
            <el-option label="生产商" value="1"></el-option>
            <el-option label="中间商" value="2"></el-option>
            <el-option label="超市" value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item size="medium" style="margin-left: 25px;">
          <el-button type="primary" >立即注册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      user:{
        id:'',
        userName:'',
        userType:'',
      }
    }
  }
};
</script>

<style>
  h3 {
    text-align: center;
    color: #6F7374;
    font-weight: 600;
  }

  .login {
    width: 380px;
    height: 305px;
    margin: 100px auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)
  }
  .user-form {
    display: flex;
    justify-content: center;
    width: 360px;
  }
  .login .el-form-item .el-input {
    width: 200px;
  }
  .login .el-from-item button {
    margin-left: 10px;
  }

</style>